<!--
 * @Author: 冯尚新 fengshangxin@yunjinhz.com
 * @Date: 2023-05-23 10:51:58
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2023-06-13 14:53:18
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\todo\dashboard.vue
 * @Description: 待办列表
-->

<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
		<!-- #endif -->
		<u-dropdown class="" :border-bottom="true" ref="uDropdown" @open="dropDownOpen()" @close="dropDownClose()">
			<u-dropdown-item v-model="dropSelect1" :title="dropItemList1[dropSelect1 - 1].label" :options="dropItemList1"
				@change="dropChange1"></u-dropdown-item>
			<u-dropdown-item ref="refDrop" :disabled="just == 'ng'" height="700" v-model="dropSelect2"
				:title="getShowDrop2Title()" :options="dropItemList2" @change="dropChange2"></u-dropdown-item>
			<u-dropdown-item title="其他">
				<view class="slot-content" style="background-color: #ffffff">
					<u-row gutter="16">
						<u-col span="3">
							<text class="lt-left-label">任务标题:</text>
						</u-col>
						<u-col span="9">
							<u-input v-model="taskTitle" placeholder="请输入任务标题" type="text"></u-input>
						</u-col>
					</u-row>
					<u-line margin="10rpx 0"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<text class="lt-left-label">发起日期:</text>
						</u-col>
						<u-col span="9">
							<view class="r-lay-row">
								<u-input v-model="rangeDate" placeholder="请选择日期区间" type="text" :disabled="true"
									@click="showDateRange = true"></u-input>
								<u-icon :color="$theme.u_type_primary" class="i-lay-m" name="calendar" size="48"></u-icon>
							</view>
						</u-col>
					</u-row>
					<u-line margin="10rpx 0"></u-line>
					<view class="btn-lay" style="position: inherit; bottom: 0">
						<u-button plain type="primary" @click="reset">重置</u-button>
						<u-button type="primary" @click="search">确定</u-button>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<view class="content u-page" v-if="show_">
			<mescroll-list :i="0" :index="0" :height="getListViewHeight()" :load-data="loadData" :init-load="false"
				ref="mescrollItem0">
				<template slot-scope="d">
					<u-card :showFoot="false" padding="20" :showHead="false" :border="false" margin="20rpx" border-radius="30">
						<view slot="body" class="n-lay" @click="forwardLink(d.data)">
							<view class="m-flex-row">
								<view class="main-title">
									{{ d.data.taskTitle }}
								</view>
								<u-tag style="flex-shrink: 0" :spStyle="getSpStyle(d.data)" mode="dark" shape="circle"
									:text="d.data.sysName"></u-tag>
							</view>
							<view class="item-sub-content">
								<template v-if="dropSelect1 != 1">
									<view v-if="d.data.procStatus != '02'" style="
											display: inline-flex;
											flex-direction: row;
											justify-content: space-between;
											align-items: center;
											width: 100%;
											font-size: 24rpx;
										">
										<text class="sub-title">审批节点: {{ d.data.procCurrActName }}</text>
										<text style="margin-top: 20rpx">审批人: {{ d.data.procCurrUserName }}</text>
									</view>
									<view v-else style="
											display: inline-flex;
											flex-direction: row;
											justify-content: space-between;
											align-items: center;
											width: 100%;
											font-size: 24rpx;
										">
										<text class="sub-title">流程状态: {{ d.data.procStatusName }}</text>
									</view>
								</template>
								<view style="margin-top: 20rpx">
									<text class="sub-title">审批节点: {{ d.data.actName || '' }}</text>
								</view>
								<view style="
										display: inline-flex;
										flex-direction: row;
										justify-content: space-between;
										align-items: center;
										width: 100%;
										font-size: 24rpx;
									">
									<text class="sub-title">发起人: {{ d.data.startUserName }}</text>
									<text style="margin-top: 20rpx">
										{{ d.data.startTime }}
									</text>
								</view>
							</view>
						</view>
					</u-card>
				</template>
			</mescroll-list>
		</view>
		<u-calendar max-date="2099-12-31" v-model="showDateRange" mode="range" @change="dateChange"></u-calendar>
	</view>
</template>

<script>
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import MescrollList from "@/components/mescroll_list.vue";
	import commonService from "@/service/common/common.service";
	import {
		COMMON_DOC,
		processDefKeys,
		sysCodeColors,
	} from "@/service/enum/common-doc";
	export default {
		components: {
			MescrollList,
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				showDateRange: false,
				show_: false,
				back: false,
				rangeDate: "",
				startTimeStart: "",
				startTimeEnd: "",
				taskTitle: "",
				dropItemList1: [{
						label: "待办事项",
						value: 1,
						interface: "getMyBizTaskTodoPage",
					},
					{
						label: "已办事项",
						value: 2,
						interface: "getMyBizTaskDonePage",
					},
					{
						label: "我发起的",
						value: 3,
						interface: "getMyBizTaskStartPage",
					},
				],
				dropSelect1: 1,
				dropSelect2: "",
				dropItemList2: [],
				processKeys: [],
				bizCodes: undefined,
				zmSysCodes: [],
				just: '', // 默认全部  zm  专卖审批  ng  内管审批
				ngSysCode: "901008", // 内管的系统编码
			}
		},
		watch: {
			zmSysCodes(newValue, oldValue) {
				if (this.just != 'ng') {
					this.dropItemList2 = this.dropItemList2.filter((it, index) => {
						return newValue.includes(it.value) || index == 0;
					});
				}
			},
		},
		onLoad(opt) {
			this.just = opt.just || "";
			console.log("todo-opt:",JSON.stringify(opt))
			// #ifdef H5-DINGDING
			// let param = this.getRouteParam() || {};
			// console.log("todo-getRouteParam:",JSON.stringify(param))
			// this.just = param.just || "";
			// #endif
			this.processKeys = processDefKeys;
			this.init();
		},
		onShow() {
			if (this.back) {
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			} else {
				this.back = true;
			}
		},
		mounted() {},
		methods: {
			init() {
				this.dropItemList2 = [];
				this.$u.dic.getDicByKeyCode(this.$u.dic.DIC_KEYS.SYS_SUBSYS, true).then(res => {
					let itArr = res || [];
					if (this.just != 'ng') {
						this.dropItemList2 = [{
							label: "全部",
							value: "",
						}, ];
						if (this.just == 'zm') {
							itArr = itArr.filter(itp => {
								return itp.value != this.ngSysCode;
							});
						}
						itArr.forEach(itm => {
							if (itm.text) {
								itm.label = itm.text;
							}
							// itm.value = itm.value;
							this.dropItemList2.push(itm);
						});
					} else {
						itArr = itArr.filter(itp => {
							return itp.value == this.ngSysCode;
						});
						if (itArr.length > 0) {
							this.dropItemList2 = [{
								label: itArr[0].text || itArr[0].label,
								value: itArr[0].value,
							}, ];
							this.dropSelect2 = itArr[0].value;
						}
					}
					this.show_ = true;
					// let mescroll = this.getMescroll(0);
					// mescroll && mescroll.triggerDownScroll();
				});
			},
			getShowDrop2Title() {
				let p = this.dropItemList2.filter(it => {
					return it.value == this.dropSelect2;
				});
				let name = "";
				if (p.length > 0) {
					name = p[0].label;
				}
				if (this.$u.test.isEmpty(name)) {
					name = "所属系统";
				}
				return name;
			},
			getListViewHeight() {
				let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #ifdef H5-DINGDING || H5-WECHAT
				p = (this.$u.sys().windowHeight - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #endif
				return p;
			},
			forwardLink(ai) {
				if (ai.mobileFormUrl && ai.mobileFormUrl.indexOf('uniMobilePage.html') == -1) {
					this.setRouteParam(ai);
					this.$u.route(ai.mobileFormUrl);
				} else {
					this.setRouteParam(ai);
					this.$u.route("pages/todo/doTransfer");
				}
			},
			updateBackState(param) {
				if (param.refresh) {
					let mescroll = this.getMescroll(0);
					mescroll && mescroll.triggerDownScroll();
				}
			},
			// 用的工作待办接口筛选数据，不用做分页查询，默认多查一批数据出来
			loadData(page) {
				let param = {
					page: page.num,
					limit: page.size,
					defaultPageSize: page.size,
					sysCode: this.dropSelect2,
					taskTitle: this.taskTitle,
					startTimeStart: this.startTimeStart,
					startTimeEnd: this.startTimeEnd,
					menuCode: "",
					processDefKeys: this.processKeys,
				};
				let fun = commonService[this.dropItemList1[this.dropSelect1 - 1].interface];
				// this.bizCodes = "d_doc_unitask,s_doc_unitask,dayPlanTerminate,i_doc_unitask,c_doc_unitask,q_nodoc_common,l_doc_unitask,NoticeInfoPublish";
				if (this.bizCodes) {
					return new Promise((resolve, reject) => {
						fun(param).then(dr => {
							if (dr.success) {
								resolve({
									totalCount: dr.count,
									data: dr.data || [],
								})
							} else {
								this.$u.toast(dr.msg);
								resolve({
									totalCount: 0,
									data: [],
								});
							}
						}).catch(e => {
							resolve({
								totalCount: 0,
								data: [],
							});
						});
					});
				} else {
					return new Promise((resolve, reject) => {
						commonService.getPageBizTaskConfig({
							page: 1,
							limit: 100,
							defaultPageSize: 100,
							parentBizCode: "",
							menuCode: "",
						}).then(res => {
							if (res.success) {
								let p = res.data.filter(it => {
									return !this.$u.test.isEmpty(it.mobileFormUrl) && it.mobileFormUrl.indexOf('pages/') == 0;
								});
								if (this.just == 'ng') { // 内管待办
									p = p.filter(it => {
										return it.sysCode == this.ngSysCode;
									});
								} else if (this.just == 'zm') { // 专卖待办
									p = p.filter(it => {
										return it.sysCode != this.ngSysCode;
									});
								}
								this.bizCodes = p.map(ip => {
									return ip.bizCode;
								});
								this.zmSysCodes = p.map(ix => {
									return ix.sysCode;
								});
								param.bizCodes = this.bizCodes;
								fun(param).then(dr => {
									if (dr.success) {
										resolve({
											totalCount: dr.count,
											data: dr.data || [],
										})
									} else {
										this.$u.toast(dr.msg);
										resolve({
											totalCount: 0,
											data: [],
										});
									}
								});
							} else {
								this.$u.toast(res.msg);
								resolve({
									totalCount: 0,
									data: [],
								});
							}
						}).catch(e => {
							resolve({
								totalCount: 0,
								data: [],
							});
						});
					});
				}
			},
			dateChange(e) {
				this.startTimeStart = e.startDate;
				this.startTimeEnd = e.endDate;
				this.rangeDate = `${e.startDate}~${e.endDate}`;
			},
			getSpStyle(it) {
				return sysCodeColors[it.sysCode] || {};
			},
			reset() {
				this.startTimeStart = "";
				this.startTimeEnd = "";
				this.rangeDate = "";
				this.taskTitle = "";
				this.$refs.uDropdown.close();
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			search() {
				this.$refs.uDropdown.close();
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			dropChange1(e) {
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			dropChange2(e) {
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			dropDownOpen(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			dropDownClose(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 0;
	}

	.content {
		background-color: #f3f4f6;
	}

	.n-lay {
		width: 100%;
		padding: 15rpx;
	}

	.m-flex-row {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}

	.main-title {
		font-size: 28rpx;
		flex: 1;
		color: #333333;
		font-weight: 400;
		margin-right: 20rpx;
	}

	.main-content {
		// color: #787676;
	}

	.slot-content {
		padding: $cm-conent-padding-column $cm-content-paddng-row;
	}

	.sub-title {
		background: #f5f5f5;
		color: #989ea1;
		font-size: 24rpx;
		border-radius: 4px;
		margin-right: 10px;
		margin-top: 20rpx;
		padding: 4px 8px;
	}

	.r-lay-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.i-lay-m {
		margin-left: 5rpx;
		flex-shrink: 0;
	}

	.lt-left-label {
		font-size: 28rpx;
		font-weight: 400;
		flex-shrink: 0;
		color: $cm-form-item-label-color;
	}

	.item-sub-content {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.lt-right-title-label {
		font-size: 28rpx;
		margin: 10rpx 0;
		color: $u-main-color;
	}

	.lt-right-title-value {
		// margin-left: 16rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: $u-type-warning-dark;
	}

	.lt-right-value {
		margin-left: 16rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: $u-main-color;
	}

	.lt-row-margin-tb {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.btn-lay {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: $cm-conent-padding-column $cm-content-paddng-row;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 10;

		.u-btn {
			flex: 1;
		}

		.u-btn:nth-child(n + 2) {
			flex: 1;
			margin-left: 20rpx;
		}
	}
</style>
